<template>
  <div class="main">
    <TopMain :main="main" />
    <Hour :hour="hour24" />
    <Day :day7="day7" />
    <Air :air="air" />
    <Indices :indices="indices" />
    <div class="top">
      <div class="weather"></div>
    </div>
  </div>
</template>

<script>
export default { name: "mains" };
</script>
<script setup>
import TopMain from "./cpns/topMain.vue";
import Hour from "./cpns/hour24.vue";
import Day from "./cpns/day7.vue";
import Air from "./cpns/air.vue";
import Indices from "./cpns/indices.vue";

import { storeToRefs } from "pinia";
import usePublicStore from "@/stores/modules/public";
import useMainStore from "@/stores/modules/main";

import { watch } from "@vue/runtime-core";

const publicStore = usePublicStore();
const { city, code } = storeToRefs(publicStore);

const mainStore = useMainStore();
watch(city, (newCity) => {
  mainStore.fetchMainData(newCity, code.value);
});
// if (city.value) mainStore.fetchMainData(city.value, code.value);
city.value && mainStore.fetchMainData(city.value, code.value);
const { main, hour24, day7, air, indices } = storeToRefs(mainStore);
</script>

<style lang="less" scoped>
.main {
  max-width: 1180px;
  margin: 0 auto;
}
</style>